<template>
  <div class="swiper_wrap" >
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      },
      swiperList: [
        {
          id: '001',
          imgUrl: 'https://tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/2e0a784e561fcb1cb9dec0d5a9fdcde2.jpg_r_640x290x70_cf52c935.jpg'
        },
        {
          id: '002',
          imgUrl: 'https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/0abc60711fb1f31a5f73953c3813cc35.jpg_640x480x70_65a57a16.jpg'
        },
        {
          id: '003',
          imgUrl: 'https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/d8566e2f09c99e664c29edf0a18a3363.jpg_640x480x70_9ed85c88.jpg'
        },
        {
          id: '004',
          imgUrl: 'https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/dbc9fbf39ef71d5a25a2e55e42d7a4a8.jpg_640x480x70_e18cf789.jpg'
        }
      ]
    }
  }

}
</script>
<style lang="stylus" scoped>
  .swiper_wrap >>> .swiper-pagination-bullet-active
    background: #fff !important
  .swiper_wrap
    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 53.3%
    background: #eee
    .swiper-img
      width: 100%
      height: 100%
</style>
